<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位练习-莲花-相对定位</title>

  <link rel="stylesheet" href="../css/index.css">
  <style>
     .box-1{
          position: relative;
          left: 80px;
          top:-30px;
     }

     .box-4{
         position: relative;
         top:-50px;
     }

     .box-3 {
         position: relative;
         left: 160px;
         top:-330px;
     }

     .box-5 {
       position: relative;
       left: 160px;
       top:-270px;
     }


  </style>
</head>
<body>

     <div class="container">
       <div class="box success">2</div>
       <div class="box danger box-1">1</div>
       <div class="box info box-4">4</div>
       <div class="box warning box-3">3</div>
       <div class="box primary box-5">5</div>
       
     </div>
</body>
</html>